<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>初识phaser</title>
  <script src="./phaser.min.js"></script>
  <style>
  body,html{
    margin:0;
    padding:0;
  }
  </style>
</head>
<body>
  
</body>
</html>
<script>
window.onload = function (){
  //var game = new Phaser.Game(游戏宽, 游戏高, 游戏渲染方式, 游戏容器, 游戏默认场景，画布元素是否透明，是否开启导航锯齿，物理引擎配置)
  //模式1
  var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update });
  
  function preload() {
      console.log('preload');
      game.load.image('sky','./assets/sky.png')
      game.load.image('ground','./assets/platform.png')
      game.load.image('star','./assets/star.png')
      game.load.spritesheet('dude','./assets/dude.png',32,48)
  }
  var platforms;//场景大地  
  var player;//小人
  var cursors;//系统键盘对象载体
  var stars;//星星
  var score = 0;//记录分数
  var scoreText;
  function create() {
      console.log('create');
      
      game.physics.startSystem(Phaser.Physics.ARCADE);
      game.add.sprite(0, 0, 'sky');//添加天空背景
      platforms = game.add.group();//添加场景组
      platforms.enableBody = true;//启动物理属性
      var ground = platforms.create(0, game.world.height - 64, 'ground'); //创建大地
      ground.scale.setTo(2, 2);//ground宽高放大两倍
      ground.body.immovable = true; //设置不能动
      var ledge = platforms.create(400, 400, 'ground'); //创建空中的地位置400，400
      ledge.body.immovable = true; //设置不能动
      ledge = platforms.create(-150, 250, 'ground');//创建空中的地
      ledge.body.immovable = true; //设置不能动

      player = game.add.sprite(32, game.world.height - 150, 'dude'); //加入小人
      game.physics.arcade.enable(player);//开启物理属性
      player.body.bounce.y = 0.2;//设置弹力
      player.body.gravity.y = 300;//设置重力
      player.body.collideWorldBounds = true;//设置与边界进行碰撞，这就是为什么小人落下的时候，到游戏区域边界就不会掉下去
      player.animations.add('left', [0, 1, 2, 3], 10, true);
      player.animations.add('right', [5, 6, 7, 8], 10, true);
      //为小人添加了两个动画，一个是向左移动，一个是向右移动，分别指定了响应的动画帧

      cursors = game.input.keyboard.createCursorKeys();//系统键盘对象

      stars = game.add.group();
      stars.enableBody = true;
      for (var i = 0; i < 12; i++)
      {
          var star = stars.create(i * 70, 0, 'star');
          star.body.gravity.y = 300;//设置重力
          star.body.bounce.y = 0.7 + Math.random() * 0.1;//设置弹性
      }

      scoreText = game.add.text(16, 16, '分数: 0', { fontSize: '32px', fill: '#000' });
      //创建分数
  }
    
  function update() {
      console.log('update');
      game.physics.arcade.collide(player, platforms);
      // 检测小人与platforms组的碰撞，而大地正是在platforms组中，这样，小人就不会穿过大地了。
      // 同样地，当小人与两个平板碰撞时，也不会穿过了

      game.physics.arcade.collide(stars, platforms); //添加星星的碰撞检测
      game.physics.arcade.overlap(player, stars, collectStar, null, this);

      player.body.velocity.x = 0;
      
      if (cursors.left.isDown)
      {
          player.body.velocity.x = -150;//小人移动速度
          player.animations.play('left');
      }
      else if (cursors.right.isDown)
      {
          player.body.velocity.x = 150;//小人移动速度
          player.animations.play('right');
      }
      else
      {
          player.animations.stop();//停止动画
          player.frame = 4;//设置停在第四帧
      }
      if (cursors.up.isDown && player.body.touching.down)
      {
          player.body.velocity.y = -350;
      }
      //小人在空中的时候，不允许跳跃，所以，加上了一个player.body.touching.down的判断条件
  }
  function collectStar (player, star) {
      star.kill();

      score += 10;
      scoreText.text = 'Score: ' + score;
  }
}


</script>

<script>
//模式2
// window.onload=function(){
//   var game = new Phaser.Game(300,600,Phaser.AUTO,'',state)
//   function state(game){
//     this.init=function(){
//       //场景初始化
//       console.log(init)
//     }
//     this.preload=function(){
//       //游戏资源预加载
//       console.log(preload)
//       game.load.image('sky','./assets/sky.png')
//       game.load.image('ground','./assets/platform.png')
//       game.load.image('star','./assets/star.png')
//       game.load.spritesheet('dude','./assets/dude.png',32,48)
//     }

//     this.create=function(){
//       //游戏场景创建
//       game.add.sprite(0, 0, 'star');
//     }

//     this.update=function(){
//       //游戏逻辑实现
//       console.log(update)
//     }

//     this.render=function(){
//       //游戏自定义渲染
//       console.log(render)
//     }
//   }
// }

</script>
